<template>
  <!-- 选择套餐 -->
  <el-drawer size="570px" title="选择套餐" :visible="value" custom-class="drawer-box" :wrapperClosable="false" :destroy-on-close="true" @open="onOpen" @close="onClose" :append-to-body="true">
    <div v-loading="loading">
      <div class="tcbox">
        <el-form :inline="true" :model="form" class="demo-form-inline" @submit.native.prevent="getData(-1)">
          <el-form-item>
            <el-input v-model="form.packageName" placeholder="已购买套餐名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" circle icon="el-icon-search" native-type="submit"></el-button>
          </el-form-item>
          <el-form-item style="float:right;">
            <el-button @click="dialogBuy=true" type="danger" icon="el-icon-circle-plus-outline">添加套餐</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tcbox">
        <h3>已购套餐</h3>
        <div v-for="(item,index) in tableList" :key="index" class="tclist">
          <div class="tcTitle overflow-omit" style="width:80%;">{{item.packageName}}</div>
          <div class="tcTime">购买时间：{{item.gmtCreate}}</div>
          <div class="tcItem">
            <el-link type="primary" @click="onGetDetail2(item)">套餐项目 ></el-link>
            <div class="fr">
              <div v-if="item.payStatus==0">
                <el-link type="danger" :underline="false" @click="onCancel(item,index)" icon="el-icon-delete" title="取消套餐"></el-link>
              </div>
              <div v-else>
                <span v-if="item.finishied==0" class="primary-color vertical-middle ">未使用完</span>
                <span v-else class="error-color vertical-middle ">已使用完</span>
              </div>
            </div>
          </div>
          <div class="tcPrice">￥{{item.orderMoney}}</div>
          <div class="tcProject" v-if="item.panelShow">
            <el-collapse accordion @change="onGetDetail3($event,item.list)">
              <el-collapse-item v-for="(item2,index2) in (item.list||[])" :key="index2" :name="index2+''">
                <template slot="title">
                  <span> {{item2.itemName}}</span>
                  <span class="oldPrice">￥{{item2.costMoney}}</span>
                  <span>￥{{item2.packagePrice}}</span>
                  <el-tag v-if="item2.finishied==1" type="success" effect="dark" size="mini">已使用完</el-tag>
                  <el-tag v-else type="info" effect="dark" size="mini">未使用完</el-tag>
                </template>
                <div class="tcProbox">
                  <!-- <div class="tcProList">实验室检查/血液一般检查 <span>已使用：2019-12-13 15:32</span></div> -->
                  <div v-for="(item3,index3) in (item2.list||[])" :key="index3" class="tcProList">
                    {{item3.detailName}}
                    <span v-if="item3.finishied==0">
                      <el-checkbox v-model="item3.checked"></el-checkbox>
                    </span>
                    <span v-else class="error-color">已使用完</span></div>
                </div>
                <br>
                <template v-if="item2.list">
                  <div style="text-align:right;padding-right:15px;">
                    <el-button type="primary"  v-if="item2.finishiedNum < item2.list.length"  size="mini" @click="onSubmit(item2,item)">立即使用</el-button>
                  </div>
                </template>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
      <br>
      <div v-if="tableList.length == 0" style="color:#999;padding:10px 0;text-align:center;">
        <i class="iconfont iconwushuju" style="font-size:40px;"></i>
        <div>暂无数据</div>
      </div>
      <br />
      <pager v-model="pager" @change-pagenum="getData"></pager>
    </div>
    <br> 
    <buyGroupDrawer v-model="dialogBuy" type="user" :cureId="cureId" :patientId="patientId" :deptId="deptId" :doctorId="doctorId" @success="getData(-1)"></buyGroupDrawer>
  </el-drawer>
</template>
<script>
export default {
  props: ["value", "patientId", "cureId","deptId","doctorId"],
  components: {
    buyGroupDrawer: () => import("@/pages/_com/buyGroupDrawer.vue")
  },
  data() {
    return {
      loading: false,
      dialogBuy: false,
      pager: { pageSize: 6, pageNum: 1, total: 0 },
      tableList: [],
      form: {
        hpId: "",
        patientId: "",
        packageName: "",
        finishied: "",
        doctorId:this.doctorId,
        deptId:this.deptId
      }
    };
  },
  mounted() {
    const th = this;
    th.form.hpId = th.adminUser.hpId;
  },
  methods: {
    //取消套餐
    onCancel(obj, index) {
      const th = this;
      th.$confirm("确定取消该套餐?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          fn();
        })
        .catch(() => {});
      const fn = function() {
        let j = {
          ids: obj.id
        };
        th.loading = true;
        th.$api
          .tc_cancelUserPackageProjectNoPay(j)
          .then(res => {
            if (res.executed) {
              th.$message.success("取消成功！");
              th.tableList.splice(index, 1);
              th.pager.total--;
            } else {
              th.$message.error(res.message);
            }
            th.loading = false;
          })
          .catch(res => {
            th.loading = false;
          });
        j = {
          cureId: th.cureId,
          packageId: obj.id
        };
        th.$api.tc_curePackageRecordcurecancel(j).then(res => {});
      };
    },
    //提交
    onSubmit(obj, objparent) {
      const th = this;
      let curList = [];
      //读取选择的子项
      obj.list.forEach(ele => {
        if (ele.checked) {
          ele.isCombo=true;
          curList.push(ele);
        }
      });
      if (curList.length == 0) {
        th.$message.warning("请选择项目");
        return;
      }
      th.getMZItemDetail(curList, obj.id);
    },
    //渲染到门诊
    getMZItemDetail(list, tcId) {
      const th = this;
      let arr = [];
      // let detailIds='';
      const newList=list.filter(it=>{
        return it.finishied==0;
      })
      newList.forEach(d => {
        let data = arr.find(d2 => {
          return d2.source == d.source;
        });
        if (data) {
          data.sourceId.push(d.sourceId);
        } else {
          arr.push({
            source: d.source,
            sourceId: [d.sourceId]
          });
          // detailIds+=`detailIds=${d.id}&`
          // detailIds.push(d.id);
        }
      });
      let j = {
        cureSourceInfo: JSON.stringify(arr),
        // params:detailIds.substring(0,detailIds.length-1)
      };
      th.loading = true;
      th.$api
        .tc_sourceandsource_id(j)
        .then(res => {
          if (res.executed) {
            let data = res.data;
            let j = {
              id: tcId,
              cureRegister: data.cureRegisterVO,
              t0: null,
              t1: null,
              t2: data.medicalAdviceVOS,
              t3: data.checkupVOS,
              t4: data.checkAssistVOS,
              t5: data.materialFeeVOS,
              t6: data.othersFeeVOS,
              isEmpty: true //清空以前的
            };
            th.$store.commit("Set_templateData", j);
            th.$store.commit("Set_templateSaveAuto", j);
            th.$message.success("加入成功");
            th.onClose();
          }
          th.loading = false;
        })
        .catch(res => {
          th.loading = false;
        });
    },
    getData(type) {
      const th = this;
      if (type == -1) {
        th.pager.pageNum = 1;
        th.pager.total = 0;
      }
      let j = { 
        searchProjectType:1
      };
      Object.assign(j, th.form, th.pager);
      th.loading = true;
      th.$api.tc_findUserPackageProjectAll(j).then(res => {
        if (res.executed) {
          const { list,total }=res.dataBody;
          th.tableList = list;
          th.pager.total = total;
        }
        th.loading = false;
      });
    },
    //获取用户三级项目
    onGetDetail3(value, list) {
      const th = this;
      if (!value) return;
      let index = Number.parseInt(value);
      let obj = list[index];
      //判断是否有数据
      if (obj.list) {
        return;
      }
      let j = {
        patientId: th.form.patientId,
        userItemId: obj.id
      };
      th.loading = true;
      th.$api.tc_findUserPackageProjectItemDetailAll(j).then(res => {
        if (res.executed) {
          const list=res.dataBody.list;
          list.forEach(d => {
            d.checked = true;
          });
          let finishiedNum=list.reduce((t,c)=>{
           return c.finishied == 0?t++:t;
          },0);
          th.$set(obj, "list", list);
          th.$set(obj,'finishiedNum',finishiedNum);
          console.log(obj);
        }
        th.loading = false;
      });
    },
    //获取用户二级套餐
    onGetDetail2(obj) {
      const th = this;
      //判断是否已经打开
      th.$set(obj, "panelShow", !obj.panelShow);
      if (obj.list) {
        return;
      }
      let j = {
        patientId: th.form.patientId,
        packageCode: obj.packageCode
      };
      th.loading = true;
      th.$api.tc_findUserPackageProjectItemAll(j).then(res => {
        if (res.executed) {
          const list =res.dataBody.list;
          th.$set(obj, "list",list);
          th.$set(obj, "panelShow", true);
        }
        th.loading = false;
      });
    },
    onOpen() {
      const th = this;
      th.form.patientId = th.patientId;
      th.getData(-1);
    },
    onClose() {
      const th = this;
      th.tableList = [];
      th.$emit("input", false);
    }
  }
};
</script>
<style lang="scss" scoped>
.tcbox {
  padding: 15px 20px;
  h3 {
    margin: 0 0 15px 0;
  }
  .el-form-item {
    margin-bottom: 0;
  }
  .tclist {
    padding: 15px;
    background: #fafafa;
    border: 1px solid #e6e6e6;
    box-shadow: 0 5px 8px rgba(99, 99, 99, 0.1);
    position: relative;
    margin-bottom: 20px;
    .tcTitle {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 5px;
    }
    .tcTime {
      color: #888;
      font-size: 13px;
      margin-bottom: 5px;
    }
    .tcItem {
      line-height: 34px;
    }
    .tcPrice {
      position: absolute;
      color: rgb(238, 93, 93);
      top: 15px;
      right: 15px;
      font-size: 22px;
    }
    .fr {
      float: right;
    }
    .labelUseing {
      color: #50c99b;
      margin-left: 20px;
    }
    .labelNopay {
      color: #f06654;
      margin-left: 20px;
    }
    .oldPrice {
      color: #888;
      text-decoration: line-through;
    }
    .tcProject {
      .el-collapse-item__header {
        i {
          margin-right: 10px;
        }
        span {
          margin: 0 5px;
        }
      }
      .tcProList {
        span {
          float: right;
        }
        &::after {
          display: block;
          clear: both;
          visibility: hidden;
          height: 0;
          overflow: hidden;
          content: ".";
        }
      }
      .tcProbox {
        > div {
          line-height: 2.1;
          padding: 0 24px;
          &:hover {
            background-color: #eee;
          }
        }
      }
    }
  }
  .el-collapse-item__wrap {
    padding-left: 24px;
  }
  .el-collapse-item__content {
    line-height: 1.9;
  }
}
.pro-item {
  margin: 0;
  padding: 0;
  > li:first-child {
    border-top: none !important;
  }
  li {
    list-style: none;
    height: 35px;
    line-height: 35px;
    overflow: hidden;
    border-top: 1px solid #eee;
    padding: 0 10px;
    &:hover {
      background-color: #eee;
      cursor: pointer;
    }
  }
}
.layout-box {
  display: flex;
  height: 100%;
  flex-direction: column;
  > div:nth-child(1) {
    flex-grow: 1;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 10px;
  }
  > div:nth-child(2) {
    flex-shrink: 0;
    padding: 10px;
    border-top: 1px solid #eee;
  }
}
</style>